<template>
  <div class="tabbar">
    <van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
      <van-tabbar-item to="/home" icon="home-o">
        首页
      </van-tabbar-item>
      <van-tabbar-item replace to="/goods" icon="search">
        发现
      </van-tabbar-item>
      <van-tabbar-item replace to="/cart" icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/login" icon="setting-o">我的账户</van-tabbar-item>
    </van-tabbar>
    <router-view />
  </div>
</template>

<script>
    import { Tabbar,TabbarItem } from 'vant'
    export default {
        name: "footer",
        components:{
            'van-tabbar':Tabbar,
            'van-tabbar-item':TabbarItem
        },
        data(){
            return {
                active: 2
            }
        }
    }
</script>

<style lang="scss">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
  }
</style>